<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <meta name="Keywords" content="" /> 
  <meta name="description" content="" /> 
  <meta name="viewport" content="width=device-width,initial-scale=1.0" /> 
  <meta content="width=640,target-densitydpi=device-dpi,user-scalable=no" name="viewport" /> 
  <link href="css/style.css" rel="stylesheet" type="text/css" /> 
  <link href="css/animate1.css" rel="stylesheet" type="text/css" /> 
  <link href="css/animations.css" rel="stylesheet" type="text/css" /> 
  <link href="css/swiper.min.css" rel="stylesheet" type="text/css" /> 
  <link href="css/fxanimations.css" rel="stylesheet" type="text/css" /> 
  <script type="text/javascript" src="js/jquery-1.11.2.js"></script> 
  <script type="text/javascript" src="js/swiper.min.js"></script> 
  <title>IOPE艾诺碧</title> 
 </head> 
 <body> 
  <div class="swiper_main"> 
   <!-- Swiper --> 
   <div class="swiper-container"> 
    <div class="swiper-wrapper"> 
     <!--A--> 
     <div class="swiper-slide swiper-active"> 
      <div class="page page1"> 
       <div class="page1_text fadeInUp" style="-webkit-animation-duration: 1s; animation-delay:2s;
-webkit-animation-delay:2s;"> 
        <img src="images/1_1.png" /> 
       </div> 
       <div class="page1_img fadeIn" style="-webkit-animation-duration: 3s; animation-delay:0s;
-webkit-animation-delay:0s; opacity:0;"> 
        <img src="images/1_2.png" /> 
       </div> 
       <div class="page1_bottom_text fadeInUp" style="-webkit-animation-duration: 0.5s; animation-delay:3s;
-webkit-animation-delay:3s;"> 
        <img src="images/page1_bottom_text1.png" /> 
       </div> 
       <div class="page1_bottom_text fadeInUp" style="-webkit-animation-duration: 0.5s; animation-delay:3.5s;
-webkit-animation-delay:3.5s;"> 
        <img src="images/page1_bottom_text2.png" /> 
       </div> 
       <div class="page1_bottom_text fadeInUp" style="-webkit-animation-duration: 0.5s; animation-delay:4s;
-webkit-animation-delay:4s;"> 
        <img src="images/page1_bottom_text3.png" /> 
       </div> 
       <div class="page1_bottom_text fadeInUp" style="-webkit-animation-duration: 0.5s; animation-delay:4.5s;
-webkit-animation-delay:4.5s;"> 
        <img src="images/page1_bottom_text4.png" /> 
       </div> 
       <div class="page1_btn fadeIn" style="-webkit-animation-duration: 2s; animation-delay:5s;
-webkit-animation-delay:5s;"> 
        <a href="http://www.iope.com.cn/cn/zh/skincare_makeup/air_cushion_zone.html"><img src="images/1_3.png" /></a> 
       </div> 
       <div class="page1_guang flash" style="-webkit-animation-duration: 8s;animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; animation-delay:6s; -webkit-animation-delay:6s; opacity:0;"> 
        <img src="images/1_guang.png" /> 
       </div> 
       <div class="dian1 flash" style="-webkit-animation-duration: 5s; animation-delay:6s;
-webkit-animation-delay:6s; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;"> 
        <img src="images/dian.png" /> 
       </div> 
       <div class="dian2 flash" style="-webkit-animation-duration: 5s; animation-delay:7s;
-webkit-animation-delay:7s; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;"> 
        <img src="images/dian.png" /> 
       </div> 
       <div class="dian1_content"> 
        <img src="images/dian1_content.png" /> 
       </div> 
       <div class="dian2_content"> 
        <img src="images/dian2_content.png" /> 
       </div> 
       <div class="page1_shan flash" style="-webkit-animation-duration: 5s; animation-delay:6s;
-webkit-animation-delay:6s; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;"> 
        <img src="images/page1_1.png" /> 
       </div> 
       <div class="page2_shan flash" style="-webkit-animation-duration: 5s; animation-delay:7s;
-webkit-animation-delay:7s; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;"> 
        <img src="images/page1_2.png" /> 
       </div> 
          
<!--        轨迹动画-->
       <div class="page1_go page1_go3d" style="-webkit-animation-duration: 10s; animation-duration: 10s; opacity:0; animation-delay:4s;
-webkit-animation-delay:2s;">
        <img src="images/1_go.png">   
       </div>
      </div> 
      <!--      <img id="arrow" class="arrowing" src="images/arrow_page.png" style="z-index:999;width:200px;position:fixed;bottom:15px;left:50%;margin-left:-150px;" /> --> 
      <!--左右翻页--> 
      <div class="next flash" style="-webkit-animation-duration: 5s; animation-delay:6s;
-webkit-animation-delay:6s; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;"> 
       <img src="images/right.png" /> 
      </div> 
     </div> 
     <!--B--> 
     <div class="swiper-slide swiper-active"> 
      <div class="page page2"> 
       <div class="page2_text fadeInUp" style="-webkit-animation-duration: 1s;animation-delay:2s;
-webkit-animation-delay:2s; opacity:0;"> 
        <img src="images/2_1.png" /> 
       </div> 
       <div class="page2_img_bg rotateIn" style="-webkit-animation-duration: 10s; animation-delay:0s;
-webkit-animation-delay:0s; opacity:0;"> 
        <img src="images/2_circle.png" /> 
       </div> 
       <div class="page2_img fadeIn" style="-webkit-animation-duration: 2s; animation-delay:1s;
-webkit-animation-delay:1s;"> 
        <img src="images/2_2.png" /> 
       </div> 
       <div class="page2_bottom_text fadeInUp" style="-webkit-animation-duration:0.5s;animation-delay:3s;
-webkit-animation-delay:3s; opacity:0;"> 
<!--                <img src="images/2_bottom_text.png">    -->
       </div> 
       <div class="page2_btn fadeIn" style="-webkit-animation-duration: 1s; animation-delay:3.5s;
-webkit-animation-delay:3.5s;"> 
        <a href="http://www.iope.com.cn/cn/zh/skincare_makeup/skin_care/category/detail.iope2014110416273327.skin_essence.html"><img src="images/2_3.png" /></a> 
       </div> 
       <div class="page2_guang expandOpen" style="-webkit-animation-duration: 6s;"> 
        <img src="images/2_guang.png" class="guang2" /> 
       </div> 
       <div class="page2_xing"> 
        <img src="images/2_xing.png" /> 
       </div>
          <!--        轨迹动画-->
       <div class="page2_go page2_go3d" style="-webkit-animation-duration: 15s; opacity:0; animation-delay:4s;
-webkit-animation-delay:4s;">
        <img src="images/1_go.png">   
       </div>
      </div> 
      <!--      <img id="arrow" class="arrowing" src="images/arrow_page.png" style="z-index:999;width:200px;position:fixed;bottom:15px;left:50%;margin-left:-150px;" /> --> 
      <!--左右翻页--> 
      <div class="prev flash" style="-webkit-animation-duration: 5s; animation-delay:4s;
-webkit-animation-delay:4s; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;"> 
       <img src="images/left.png" /> 
      </div> 
      <div class="next flash" style="-webkit-animation-duration: 5s; animation-delay:4s;
-webkit-animation-delay:4s; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;"> 
       <img src="images/right.png" /> 
      </div> 
     </div> 
     <!--C--> 
     <div class="swiper-slide swiper-active"> 
      <div class="page page3"> 
       <div class="page3_text fadeInUp" style="-webkit-animation-duration: 1s; animation-delay:2s;
-webkit-animation-delay:2s;"> 
        <img src="images/3_1.png" /> 
       </div> 
       <div class="page3_img_bg rotateIn" style="-webkit-animation-duration: 5s; animation-duration: 5s;"> 
        <img src="images/3_circle.png" /> 
       </div> 
       <div class="page3_img fadeIn" style="-webkit-animation-duration: 3s; animation-delay:1s;
-webkit-animation-delay:1s; opacity:0;"> 
        <img src="images/3_2.png" /> 
       </div> 
       <div class="page3_btn  fadeIn" style="-webkit-animation-duration: 1s; animation-delay:4s;
-webkit-animation-delay:4s;"> 
        <a href="http://www.iope.com.cn/cn/zh/skincare_makeup/skin_care/category/detail.iope2014110416273359.skin_cream.html"><img src="images/3_3.png" /></a> 
       </div> 
<!--
       <div class="page3_guang"> 
        <img src="images/3_guang.png" /> 
       </div> 
-->
       <div class="page3_guang1 rotateIn" style="-webkit-animation-duration: 8s; animation-delay:6s;
-webkit-animation-delay:6s;"> 
        <img src="images/3_guang1.png" /> 
       </div> 
       <div class="page3_guang2 rotateIn" style="-webkit-animation-duration: 8s; animation-delay:4s;
-webkit-animation-delay:4s;"> 
        <img src="images/3_guang2.png" /> 
       </div> 
       <div class="page3_guang3 rotateIn" style="-webkit-animation-duration: 8s; animation-delay:2s;
-webkit-animation-delay:2s;"> 
        <img src="images/3_guang3.png" /> 
       </div> 
       <div class="page3_bottom_text fadeInUp" style="-webkit-animation-duration: 0.5s; animation-delay:3s;
-webkit-animation-delay:3s;"> 
<!--                <img src="images/3_bottom_text.png">    -->
       </div> 
       <div class="page3_xing pulse1" style="-webkit-animation-duration: 2s;animation-delay:7s; -webkit-animation-delay:7s; opacity:0;"> 
<!--        <img src="images/page3_xing.png" /> -->
       </div>
       <div class="page3_go page3_go3d" style="-webkit-animation-duration: 15s; opacity:0; animation-delay:4s;
-webkit-animation-delay:4s;">
        <img src="images/1_go.png">   
       </div>
      </div> 
      <!--      <img id="arrow" class="arrowing" src="images/arrow_page.png" style="z-index:999;width:200px;position:fixed;bottom:15px;left:50%;margin-left:-150px;" /> --> 
      <!--左右翻页--> 
      <div class="prev flash" style="-webkit-animation-duration: 5s; animation-delay:5s;
-webkit-animation-delay:5s; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;"> 
       <img src="images/left.png" /> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
  <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
    });
    $(document).ready(function(){
        setInterval(function(){
            $(".page3_img_bg").fadeIn(1000);
            
            $(".page2_xing").fadeOut(800).delay(2000).fadeIn(1000);       
        },3700);
        setTimeout(function(){
            setInterval(function(){
//                $(".dian1").delay(500).fadeOut(800).delay(500).fadeIn(500);
//                $(".dian2").fadeOut(800).delay(500).fadeIn(500);
            },2000);
        },10000);
        $(".page3_guang").fadeOut(800).delay(2000).fadeIn(1000);
        $(".dian1").click(function(){
            $(".dian1_content").fadeIn(1000);
        });
        $(".dian2").click(function(){
            $(".dian2_content").fadeIn(1000);
        });
    });
</script>  
 </body>
</html>